<template>
  <div style="padding: 10px;">
    <h1 style="margin: 0;">测试折线图</h1>
    <div class="block">
      <span class="demonstration">默认</span>
      <el-date-picker
        v-model="newdata"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
      </el-date-picker>
      <p>{{ newdata }}</p>
      <el-button @click="select">选择</el-button>
    </div>
    <div id="main" ref="echarts" class="echarts"></div>
    <div id="main2" ref="echarts" class="echarts"></div>

    <el-table
      :data="dataList"
      border
      style="width: 100%">
      <el-table-column
        prop="deviceNo"
        label="设备编号"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="deviceConsumptionNow"
        label="当前功耗，单位W"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="deviceConsumptionAll"
        label="总功耗，单位KWH"
        align="center">
      </el-table-column>
      <el-table-column
        prop="ia"
        label="A项电流，单位A"
        align="center">
      </el-table-column>
      <el-table-column
        prop="ib"
        label="B项电流，单位A"
        align="center">
      </el-table-column>
      <el-table-column
        prop="ic"
        label="C项电流，单位A"
        align="center">
      </el-table-column>
      <el-table-column
        prop="ua"
        label="A项电压，单位V"
        align="center">
      </el-table-column>
      <el-table-column
        prop="ub"
        label="B项电压，单位V"
        align="center">
      </el-table-column>
      <el-table-column
        prop="uc"
        label="C项电压，单位V"
        align="center">
      </el-table-column>
      <el-table-column
        prop="recordTime"
        label="记录时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="deviceStatus"
        label="设备状态"
        align="center">
        <template slot-scope="scope">
          <el-tag :type = "scope.row.deviceStatus == '正常' ? 'success' : 'danger'">{{ scope.row.deviceStatus =='正常' ? '正常' : '异常' }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { consume, list } from "@/api/system/ceshi"
export default {
  data() {
    return {
      testTime: "2022-07-08",
      newdata: "",
      dataList: [],
      state: ""
    }
  },
  mounted() {
    this.energy();
    this.energy1();
  },
  methods: {
    select() {
      console.log(this.newdata);
      this.testTime = this.newdata
      this.energy()
    },
    energy1() {
      var chartDom2 = document.getElementById('main2');
      var myChart = echarts.init(chartDom2);
      var option2;
      option2 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };
      option2 && myChart.setOption(option2);
    },
    energy() {
      // 折线图请求
      consume(this.testTime).then((res) => {
        console.log(res);
        var chartDom = document.getElementById('main');
        
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          title: {
            text: '能耗曲线'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['能耗1', '能耗2']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            data: res.data[2]
          },
          yAxis: {
            type: "value",
            // min: 47110,
            // max: 47130
          },
          series: [
            {
              name: '能耗1',
              type: 'line',
              data: res.data[1]
            },
            {
              name: '能耗2',
              type: 'line',
              data: res.data[0]
            }
          ]
        };
        option && myChart.setOption(option);
      })

      // 列表
      list().then((res) => {
        console.log(res);
        this.dataList = res.data
      })
    }
  }
}
</script>

<style>
.echarts{
  width: 100%;
  height: 400px;
  /* background-color: pink; */
}
.main2{
  width: 100%;
  height: 400px;
}
</style>